<template>
  <div class="add-course" ref="addCourse">
    <x-header>课程详情</x-header>
    <group title="基本信息">
      <cell title="老师姓名">{{detailObj.title}}</cell>
      <cell title="性别">{{detailObj.courseObj && detailObj.courseObj.gender}}</cell>
      <cell title="所在学院">{{detailObj.courseObj && detailObj.courseObj.college}}</cell>
      <cell title="所教课程">{{detailObj.content}}</cell>
      <cell title="综合评分">
        <div>
          <span class="score">{{Average(detailObj.scores) || 0}}分 | </span>
          <span class="total">{{detailObj.cmtNum || 0}}人评价</span>
        </div>
      </cell>
    </group>
    <group title="教学打分" class="rater-group">
      <cell v-for="(item,i) in pointLists" :key="i" :title="item.title">
        <rater active-color="#EFA79B" disabled v-model="item.val" :font-size="24"></rater>
      </cell>
    </group>
    <group title="教师标签" >
      <checker
         v-model="detailObj.tags"
         type="checkbox"
         default-item-class="my-item"
         selected-item-class="my-item-selected detail">
        <checker-item
        disabled
        v-for="(item,i) in tagsLists"
        :key="i" :value="i">{{`${item.value}(${item.num})`}}
        </checker-item>
      </checker>
    </group>
    <div  ref="commentList">
    <group title="评论列表（点击评论可删除或举报）"  v-if="detailObj.cmt.cmts && detailObj.cmt.cmts.length">
      <cell class="comment-list" v-for="(item,i) in detailObj.cmt.cmts" :key="i"
        @click.native="handleRemoveMsgs(item, i)">
        <div class="top">
          <div class="left">
            <avatar :username="item.creator.nickname" :src="item.creator.avatar"  :size="40"></avatar>
          </div>
          <div class="right">
            <div class="right-1">
              <div>{{item.creator.nickname || 'helllo'}}</div>
              <div>
                <span>{{getTime(item.createTime)}}</span>
                <!-- <span>来自#{{item.category}}#</span> -->
              </div>
            </div>
            <div class="right-2" @click.stop="handleLike(item, i, false)" @dblclick="handleLike(item, i, true)">
              <i class="icon-dianzan"
                :class="{'no-dianzan': !item.hasLike}"></i>
              <span style="margin-left: 3px" v-if="item.likeNum">{{item.likeNum}}</span>
              <!-- <i v-if="user._id === (detailObj.creator || {})._id" class="icon-dianzan"></i> -->
            </div>
          </div>
        </div>
        <div class="main" v-html="item.content"></div>
      </cell>
    </group>
    </div>
    <br>
    <x-button @click.native="goToCmt" class="btn" type="primary">来评价</x-button>
    <actionsheet
      show-cancel
      v-model="showMenus"
      :menus="menusList"
      @on-click-menu="handleMenus">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import { formatMsgTime } from '../../js/getTime'
import {
  Actionsheet,
  XHeader,
  Checker,
  CheckerItem,
  Group,
  XButton,
  Cell,
  Rater
} from 'vux';

const HomeStore = namespace('home');
const ListStore = namespace('list');
const DetailStore = namespace('detail');

@Component({
  components: {
    Actionsheet,
    Avatar,
    XHeader,
    Checker,
    CheckerItem,
    Group,
    XButton,
    Rater,
    Cell
  }
})
export default class CourseDetail extends Vue {
  @HomeStore.Action getlikePostMsg;
  @HomeStore.Action saveRemovePostMsgs;
  @DetailStore.Action getDetail;
  @DetailStore.State detail;
  @ListStore.Action getCourse;
  @ListStore.State courseDetail;
  @ListStore.State pointList;
  @ListStore.State tagsList;
  @ListStore.State tagsObject;
  @ListStore.State user
  // tagsList = [
  //   { id: 1, name: '幽默' },
  //   { id: 2, name: '负责' },
  //   { id: 3, name: '厉害' },
  //   { id: 4, name: '严肃' }
  // ]
  // pointList = [
  //   { title: '教得好', val: 5 },
  //   { title: '挂科少', val: 4 },
  //   { title: '给分高', val: 5 },
  //   { title: '点名少', val: 4 },
  //   { title: '作业多', val: 5 }
  // ]
  tagsLists = []
  pointLists = []
  detailObj = {
    cmt: {
      cmts: []
    }
  }
  noLikes = true
  showMenus = false
  currentPostObj = {}
  menusList = {
    menus1: '删除',
    menus2: '举报'
  }
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  created () {
    this.getDetails()
  }
  getDetails () {
    this.getDetail({_id: this.$route.params.id}).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.detailObj = this.detail
        if (this.detail.scores.length) {
          this.pointLists = this.pointList.filter((item, index) => {
            item.val = this.detail.scores[index];
            return item;
          })
        }
        const tagObj = this.detail.tags;
        if (Object.keys(tagObj).length) {
          this.tagsLists = Object.keys(tagObj).map(t => ({value: this.tagsObject[t], num: tagObj[t]}))
        }
      }
    })
  }
  handleLike (postObj, i, state) {
    this.getlikePostMsg({_id: postObj._id}).then(res => {
      if (res.code === 0) {
        if (postObj.hasLike) {
          this.$set(this.detailObj.cmt.cmts[i], 'likeNum', postObj.likeNum - 1);
        } else {
          this.$set(this.detailObj.cmt.cmts[i], 'likeNum', postObj.likeNum + 1);
        }
        this.$set(this.detailObj.cmt.cmts[i], 'hasLike', !postObj.hasLike);
      } else {
        this.$vux.toast.text(res.msg || '点赞失败', 'middle');
      }
    })
  }
  handleRemoveMsgs (item, i) {
    if (item.creatorId !== this.userInfo._id) { // 登录用户
      delete this.menusList.menus1
    }
    this.currentPostObj = item;
    this.currentPostObj.index = i;
    this.showMenus = true;
  }
  handleMenus (keys) {
    if (keys === 'menus1') {
      const _this = this;
      this.$vux.confirm.show({
        title: '提示',
        content: '确认删除此条评论吗？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm () {
          _this.handleRemovePostMsgs(_this.currentPostObj)
        }
      })
    } else if (keys === 'menus2') {
      const routeQuery = {
        info: this.currentPostObj,
        type: 'msg'
      }
      this.$router.push({ path: '/report', query: routeQuery })
    }
  }
  handleRemovePostMsgs (postObj) { // 删除评论
    this.saveRemovePostMsgs({postMsgIds: [postObj._id]}).then(res => {
      if (res.code === 0) {
        this.currentPostObj = {}
        // this.getDetails()
        this.detailObj.cmt.cmts.splice(postObj, 1);
      } else {
        this.$vux.toast.text(res.msg || '删除评论失败', 'middle');
      }
    })
  }
  Average (scores) {
    return scores && ((scores.reduce((acc, item) => acc + item, 0) / scores.length).toFixed(1) || 0);
  }
  goToCmt () {
    const {id} = this.$route.params;
    this.$router.push(`/coursedetailcmt/${id}`);
  }
}
</script>
<style lang="less">
  .add-course {
    padding-bottom: 55px;
    padding-top: 46px;
    overflow-y: scroll;
    .weui-cell {
      padding: 5px 15px;
    }
    .rater-group {
      .weui-cell {
        padding: 4px 15px;
      }
    }
    .weui-cells {
      width: 98%;
      margin: 0 auto;
      border-radius: 10px;
      &::before {
        border-top: none;
      }
      &::after {
        border-bottom: none;
      }

      .weui-cell {
        &::before {
          border-top: 1px ;
        }
      }
    }
    .weui-cells__title {
      padding-left: 4%;
    }
    .comment-list {
      // font-size: 12px;
      .weui-cell__ft {
        text-align: left;
        width: 100%;
      }
    }
    .focusman {
      height: 18px;
      // border: 1px solid #E5E5E5;
      padding: 0px 8px;
      color: #666666;
      // font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .right {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .right-1 {
        display: flex;
        flex-direction: column;
      }
      .right-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px 5px 5px;
        .icon-dianzan {
          color: #efa79b;
        }
        .no-dianzan {
          color: #c4c4c4!important;
        }
      }
    }
    .main {
      padding-left: 20%;
    }
    .btn {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .vux-checker-box {
      padding: 15px;
      padding-bottom: 9px;
      padding-right: 9px;
      padding: 15px;
      padding-bottom: 9px;
      padding-right: 9px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .my-item {
      font-size: 12px;
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .my-item-selected {
      background: #ebebeb;
      // &.detail {
      //   color: #ccc;
      // }
    }
  }
</style>
